<script lang="ts">
  import { computed, defineComponent, h, unref } from 'vue';
  import BasicButton from './BasicButton.vue';
  import { Modal } from 'ant-design-vue';
  import { extendSlots } from '/@/utils/helper/tsxHelper';
  import { omit } from 'lodash-es';
  import { useAttrs } from '/@/hooks/core/useAttrs';
  // import { useI18n } from '/@/hooks/web/useI18n';

  const props = {
    /**
     * Whether to enable the drop-down menu
     * @default: true
     */
    // enable: {
    //   type: Boolean,
    //   default: true,
    // },
  };

  export default defineComponent({
    name: 'ModalButton',
    inheritAttrs: false,
    props,
    setup(props, { slots }) {
      const attrs = useAttrs();

      const getBindValues = computed(() => {
        return Object.assign({ ...props, ...unref(attrs) });
      });

      return () => {
        const bindValues = omit(unref(getBindValues), 'icon');

        const btnBind = omit(bindValues, 'title') as Recordable;

        if (btnBind.disabled) btnBind.color = '';

        const Button = h(BasicButton, btnBind, extendSlots(slots));

        // if (!props.enable) {
        //   return Button;
        // }

        return h(Button, {
          onClick: () => {
            const data = btnBind.showModalConfirm || {};

            const model = Modal.confirm(data);
            if (Object.keys(data).length) {
              data?.update?.(model);
            }
          },
        });
      };
    },
  });
</script>
